<template>
  <div class="">
    <h3
      class="flex items-center justify-start pb-4 cursor-pointer"
      @click="emits('closeDetail')"
    >
      <el-icon class="mr-2"><ArrowLeftBold /></el-icon>
      <span>{{ $t("用户总览") }}</span>
    </h3>
    <el-card class="pb-4 mb-2">
      <div class="flex items-start justify-start">
        <div class="flex items-center justify-start flex-1 mb-2">
          <h2 class="text-lg text-color1 w-[20%]">{{ $t("用户ID") }}</h2>
          <div class="flex-1">
            <p class="text-lg">
              {{ userInfo.uid }}
            </p>
          </div>
        </div>
        <div class="flex items-center justify-start flex-1 mb-2">
          <h2 class="text-lg text-color1 w-[20%]">{{ $t("用户账号") }}</h2>
          <div class="flex-1">
            <p class="text-lg">
              {{ userInfo.account_name }}
            </p>
          </div>
        </div>
      </div>
      <div class="flex items-start justify-start">
        <div class="flex items-center justify-start flex-1">
          <h2 class="text-lg text-color1 w-[20%]">{{ $t("可用数量") }}</h2>
          <div class="flex-1">
            <p class="text-lg">
              {{ userInfo.available }}
            </p>
          </div>
        </div>
        <div class="flex items-center justify-start flex-1">
          <h2 class="text-lg text-color1 w-[20%]">{{ $t("接收数量") }}</h2>
          <div class="flex-1">
            <p class="text-lg">
              {{ userInfo.receive_amount }}
            </p>
          </div>
        </div>
      </div>
      <div class="flex items-start justify-start mt-2">
        <div class="flex items-center justify-start flex-1">
          <h2 class="text-lg text-color1 w-[20%]">{{ $t("冻结数量") }}</h2>
          <div class="flex-1">
            <p class="text-lg">
              {{ userInfo.freeze }}
            </p>
          </div>
        </div>
        <div class="flex items-center justify-start flex-1">
          <h2 class="text-lg text-color1 w-[20%]">{{ $t("发送数量") }}</h2>
          <div class="flex-1">
            <p class="text-lg">
              {{ userInfo.send_amount }}
            </p>
          </div>
        </div>
      </div>
    </el-card>
    <div class="mt-4 custom">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane :label="$t('交易订单')" name="1"> </el-tab-pane>
        <el-tab-pane :label="$t('账户流水')" name="2"></el-tab-pane>
        <el-tab-pane :label="$t('游戏记录')" name="3"></el-tab-pane>
      </el-tabs>
    </div>
  </div>
  <OrderList v-if="activeName == 1" :uid="userInfo.uid" />
  <RecordPage v-if="activeName == 2" :uid="userInfo.uid" />
  <GameList v-if="activeName == 3" :uid="userInfo.uid" />
</template>
<script setup>
import { ref, reactive } from "vue";
import { getUserListApi } from "@/api/account/index";
import { useI18n } from "vue-i18n";
import OrderList from "./components/orderList.vue";
import RecordPage from "./components/recordPage.vue";
import GameList from "./components/gameList.vue";
const { t } = useI18n();
const loading = ref(false);

const props = defineProps({
  userInfo: {
    type: Object,
    default: () => {},
  },
});
const emits = defineEmits(["closeDetail"]);
// 分页
const pageable = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});
// 表格数据
const tableData = ref([]);

const activeName = ref("1");
// 参数
const param = () => {
  return {
    page: pageable.pageNum,
    pagesize: pageable.pageSize,
  };
};
// 获取表格数据
const getTbaleData = async () => {
  loading.value = true;

  try {
    // 获取数据
    const res = await getUserListApi(param());
    // console.log(res);
    loading.value = false;
    tableData.value = res.list;
    pageable.total = res.page.total_count;
  } catch (error) {
    loading.value = false;
  }
};
getTbaleData();
Promise.all([getTbaleData()]);
</script>
